{% load static %}
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>
	<!-- Your Basic Site Informations -->
	<title>图表制作</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta name="description" content="Enews is a news or magazine site template that built with very cool responsive template with clean design, fast load, seo friendly, beauty color and a slew of features." />
    <meta name="keywords" content="Site Template, News, Magazine, Portofolio, HTML, CSS, jQuery, Newsletter, PHP Contact, Subscription, Responsive, Marketing, Clean, SEO" />
    <meta name="author" content="Dots Theme" />
    
    <!-- Mobile Specific Meta -->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    <!-- Stylesheets -->
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/css/bootstrap-responsive.min.css">
    <link rel="stylesheet" href="/static/css/flexslider.css">
    <link rel="stylesheet" href="/static/css/prettyPhoto.css">
    <link rel="stylesheet" href="/static/css/style.css">
    <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Bitter' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    
    <noscript><link rel="stylesheet" href="/static/css/no-js.css"></noscript> <!-- If JavaScript Disabled -->
    
    <!--[if lt IE 9]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->



    
    <!-- Favicons -->
	<link rel="shortcut icon" href="/static/images/favicon.ico">
	<link rel="apple-touch-icon" href="/static/images/apple-touch-icon.png">
	<link rel="apple-touch-icon" sizes="72x72" href="/static/images/apple-touch-icon-72x72.png">
	<link rel="apple-touch-icon" sizes="114x114" href="/static/images/apple-touch-icon-114x114.png">
    
    <!-- JavaScript -->
    <script type="text/javascript" src="/static/js/jquery-1.8.3.min.js"></script>
    <script type='text/javascript' src='/static/js/bootstrap.min.js'></script>
    <script type='text/javascript' src='/static/js/jquery.easing.js'></script>
    <script type='text/javascript' src='/static/js/jquery.flexslider-min.js'></script>
    <script type='text/javascript' src='/static/js/jflickrfeed.min.js'></script>
    <script type='text/javascript' src='/static/js/jquery.fitvids.min.js'></script>
    <script type='text/javascript' src='/static/js/jquery.lazyload.mini.js'></script>
    <script type='text/javascript' src='/static/js/jquery.prettyPhoto.js'></script>
    <script type='text/javascript' src='/static/js/jquery.placeholder.min.js'></script>
    <script type='text/javascript' src='/static/js/jquery.jticker.js'></script>
    <script type='text/javascript' src='/static/js/jquery.mobilemenu.js'></script>
    <script type='text/javascript' src='/static/js/jquery.isotope.min.js'></script>
    <script type='text/javascript' src='/static/js/jquery.hoverdir.js'></script>
    <script type='text/javascript' src='/static/js/modernizr.custom.js'></script>
    <script type="text/javascript" src="/static/js/main.js"></script>

    <link href="/static/css/UserStyle/smart_wizard.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="/static/js/UserJs/jquery.smartWizard-2.0.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        // Smart Wizard
        $('#wizard').smartWizard();

        function onFinishCallback(){
            $('#wizard').smartWizard('showMessage','Finish Clicked');
        }

    });
    </script>


    <link href="/static/css/ui-choose.css" rel="stylesheet" />
	<style>
    .demo-box {
        width: 100%;
        padding: 20px;
        border: 5px solid #ccc;
    }

    .demo-table {
        border-collapse: collapse;
        width: 100%;
    }

    .demo-table caption {
        border-bottom: 1px dashed #ccc;
        height: 40px;
        margin-bottom: 20px;
        font: 5px/1.2 normal '微软雅黑';
    }

    .demo-table tr td {
        padding: 8px 10px;
        font: 5px/1.8 normal 'microsoft yahei';
        vertical-align: top;
    }

    .ui-input {
        vertical-align: top;
        height: 18px;
        font-size: 16px;
        line-height: 20px;
        border: 1px solid #aaa;
        padding: 6px 8px;
        border-radius: 3px;
    }
		.jq22-header h1{ text-align: center; font-size: 16px; }
    </style>

</head>

<body>
        <script>
        function detail(pageDetail) {
				//传递目标页页码
		$("#hidDetail").val(pageDetail);
		$("#frmAnalysisDetail").submit();
	}
        function paging(pageIndex) {
				//传递目标页页码
		$("#hidPageIndex").val(pageIndex);
		$("#frmAnalysis").submit();
	}
    </script>


 {% include 'top.html' %}
 


  <div class="row-fluid">
   <div id="main" class="portofolio">
    {% include 'pathname.html' %}

{#     <div class="intro" style="background: #c9f6f9;border: 1px solid #ccc;box-shadow: 2px 2px 2px #eee;padding: 5px 15px 10px 15px;">#}
{#        <h4>1.该页面允许管理员设置各网站初始爬取界面。<strong>但请谨慎操作</strong>#}
{#            <br/><br/>#}
{#            2.您的每一项操作都会被系统记录。#}
{#        </h4>#}
{#    </div>#}
<div class="alert alert-success">
      <button type="button" class="close" data-dismiss="alert">&times;</button>
      <h4>提示!</h4>
      您需要在表格中输入数据，然后系统自动生成表格.<br>
     </div><br>
       <div class="alert alert-error">
      <button type="button" class="close" data-dismiss="alert">&times;</button>
      <h4>注意!</h4>
      1.您可以在第1列和第1行输入表头,然后在地2行和第2列开始输入数值数据.<br>
      2.第1行和第1列必须存在.也就是说表格最少为1×1的表格,这是保证有数据生成的基础.<br>
      3.您可以根据自己需求继续添加行列,现在最多支持10×10表格.
     </div><br>
    <div id="wizard" class="swMain">
	<ul>
		<li><a href="#step-1"><span class="stepNumber">1</span><span class="stepDesc">数据填入<br /><small>填入相应数据</small></span></a></li>
{#		<li><a href="#step-2"><span class="stepNumber">2</span><span class="stepDesc">数据选择<br /><small>勾选目标数据</small></span></a></li>#}
		<li><a href="#step-3"><span class="stepNumber">2</span><span class="stepDesc">图表选择<br /><small>选择具体图表样式</small></span></a></li>
		<li><a href="#step-4"><span class="stepNumber">3</span><span class="stepDesc">完成<br /><small>浏览图表</small></span></a></li>
	</ul>

	<div id="step-2">
        <table class="demo-table">
            {% include 'PickKey.html' %}
        </table>
	</div>
	<div id="step-1" style="height: 350px;">
        <table class="demo-table" id="intoTable" border="2" style="width: 100%;height: 100%;background-color: #ffffff">
            <script>

                $(document).ready(function(){
                    tdStart = "<td style=\"padding:0;border: 0;\"><input type=\"text\" id=\"td" ;
                    tdEnd = "\" name=\"\" style=\"width: 100%;height: 100%;font-size:18px;\"/></td>";
                    theadStart = "<td style=\"padding:0;border: 1;text-align:center;\"><b>";
                    theadEnd = "</b></td>";
                    $('tbody').remove();
                    theadStr = "<tr>";
                    for (k = 0 ; k<10 ; k++){
                        if (k != 0)
                            theadStr += theadStart + "列"+ String(k) +theadEnd;
                        else
                            theadStr += theadStart + "行列" +theadEnd;
                    }
                    console.log(theadStr);
                    $('#intoTable').append(theadStr+"</tr>");
                    for(var i=1;i<10;i++){
                        var sep1 = "<tr>";
                        //$('#intoTable').append("<tr>");
                        for(var j=0;j<10;j++) {
                            if(j != 0)
                                sep1 += tdStart + String(i) + String(j) + tdEnd;
                            //$('#intoTable').append(tdStart + String(i) + String(j) + tdEnd)
                            else
{#                                sep1 += theadStart + "行" + String(j) + theadEnd;#}
                                sep1 += tdStart + "c\"" + "value = \"" + "行" +String(i) + tdEnd;
                        }
                        sep1 += "</tr>";
                        //$('#intoTable').append("</tr>");
                        $('#intoTable').append(sep1);
                    }
                })
            </script>
{#                 rowspan="2"#}
{#                 colspan="2"#}


        </table>
	</div>
	<div id="step-3">

        <button type="button" id="">柱状图</button>
    </div>
	<div id="step-4">
        <button type="button" id="goChart">完成</button>
        <a id="goChart">完成</a>
    </div>
</div>
    <div id="intoChart" style="width: 100%;height: 50%;"></div>

    </div> <!-- End Row-Fluid -->
   </div> <!-- End Main -->


 </div> <!-- End Container -->

{% include 'bottom.html' %}
<script>
	// 将所有.ui-choose实例化
	$('.ui-choose').ui_choose();
    var pTime = $('#pTime').data('ui-choose'); // 取回已实例化的对象
	pTime.click = function(index, item) {
	    console.log('click', index, item.text())
	};
	pTime.change = function(index, item) {
	    console.log('change', index, item.text())
	};
	// uc_01 ul 单选
	var uc_01 = $('#uc_01').data('ui-choose'); // 取回已实例化的对象
	uc_01.click = function(index, item) {
	    console.log('click', index, item.text())
	};
	uc_01.change = function(index, item) {
	    console.log('change', index, item.text())
	};
	</script>
        <script src="/static/js/echarts.min.js"></script>
<script src="/static/js/dataJS/UserChart/chartBarnn.js"></script>
</body>
</html>